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Hour 5 



pages are categorized by these programs, the more likely they are to be found by exactly 
the folks you want to attract. 

The most important step in ensuring that the spiders categorize a page correctly is giving 
it a good, descriptive title, as described earlier in this hour (all spiders look at page 
titles). But in Composer, you can increase the accuracy with which you'll be categorized 
by typing a brief Description in the Page Properties dialog box (Format, Page Title and 
Properties). 



Besides title and description, there are two other ways you can describe your 
page to search engines, helping those engines do a better job of leading vis- 
itors to your pages: Keywords and Classification. 

• Keywords are any important terms with which your page might be 
associated. For example, the site for a reptile store might use the key- 
words pet, reptile, snake, herp, lizard, turtle, tortoise, etc. Think of 
words visitors might enter as search terms when seeking a site like 
yours; those are your keywords. 

• Classification is a category or class in which your site belongs: 
Shopping, business, recreation, and so on. 

To add keywords and/or a classification to your site, type them in the boxes 
provided on the General tab of the Page Properties dialog (refer back to 
Figure 5.2). As directed on the dialog, type a comma between each keyword 
in the Keywords box, or between multiple classifications in the Classification 
box. (In both boxes, insert dashes between multi-word terms; for example, 
reptile -store could be one keyword.) 



Many spiders read the description and regard the words in it as clues to the page's proper 
category. If your page is about bicycles, including a description that contains words like 
bicycle, bike, cycling, cycle, cyclist, Huffy, and so on may increase the chances that those 
interested in cycling find your page through searches. 

Also, when a search turns up your page, many search engines display the description 
along with the link to your site. A well-worded description helps ensure that folks who 
will be interested in your site get there. 



Choosing Custom Colors for a Whole Page 

In general, the visitor's browser — including Netscape and Internet Explorer — chooses the 
colors for the text and background of a page. Folks are then free to choose color schemes 
they find pleasing to their own eyes, and to have all Web pages show those colors, unless. . . 




Choosing a Title, Text Colors, and Other Page Basics 



Unless the Web author (that's you) has applied custom colors. Custom colors are selected 
colors for the background and text that override the browser's color settings so that the 
Web author — not the browser — controls the color of text and the background. 



Note that custom colors affect only text and background colors. They have 
no effect on the colors in pictures or picture backgrounds [see Hour 14, 
"Adding Pictures (and Picture Backgrounds)"]. Pictures are always displayed 
with whatever colors they were created with, regardless of any settings in 
the page properties or the browser. 




You can assign custom colors separately for each of the following page elements: 

• Normal text — All text in the page that is not a link. 

• Link text — All links in the page except those that are active or visited (described 
next). 

• Active Link text — Immediately after a link has been clicked by the visitor, it may 
remain visible for a few moments while the browser retrieves the file to which the 
link points. While the link remains visible, it changes color to indicate that it has 
been activated. 

• Followed link text — Links that the visitor has previously used through his or her 
browser. In your own travels online, you may have noticed that when you return to 
pages you've visited before, links you've used appear in a different color from 
those you've never clicked. 

• Background — The entire background area of the page can be a solid custom color. 
The background color always sits behind text or images in the page, never cover- 
ing them, obscuring them, or affecting their color. 



The text colors you select in the Page Properties box automatically affect the 
page elements they're supposed to, freeing you to forget about text color 
when composing your page. 

But note that, as you work on your page, you can selectively choose the 

color of any block of text, to give it special emphasis. The color you choose 
need not be one of the colors you selected in the Page Properties box; it can 
be any color you want. To learn how to choose the color of a selected block 
of text, see Hour 7, "Formatting Text." 
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To Do: Choose custom colors 

1. Open the page whose colors you want to choose. 

2. Choose Format, Page Colors and Properties. 

3. In the Page Properties dialog, select the Colors and Background tab. 



Be careful that the text and link colors you choose stand out against the back- 
ground color. For example, if you select a dark background color, all the text 
colors must be light so that the text will be legible atop the background. 



Figure 5.3 
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4. The default choice, Use viewer's browser colors, lets your visitor's browser deter- 
mine the color scheme. Override this setting by clicking Use custom colors. 

5. Click the button to the left of Normal Text. A chart of colors appears. 

6. Click the box showing the color you want to use and then click OK. 

7. Repeat Steps 4 and 5 for the other text types and background. 
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Figure 5.4 
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Figure 5.5 

Step 5: Click a color. 
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even be monospaced for some users, although the vast majority of people stick with the standard fonts 
that their browsers come set up with. 

The <pre> tag causes text to appear in the monospaced font, but it also does something unique and 
useful. As you learned in Hour 2, multiple spaces and line breaks are normally ignored in HTML files, 
but <pre> causes exact spacing and line breaks to be preserved. For example, without <pre> the text 
at the end of Figure 6.3 would look like the following: 

calories grams usrda /serving of fat moisture regular 

3 4 100% unleaded 3 2 100% organic 2 3 99% sugar free 0 1 110% 

Even if you added <br / > tags at the end of every line, the columns wouldn't line up properly. 
However, when you put <pre> at the beginning and </pre> at the end, the columns line up 
properly — no <br / > tags are needed. 

There are fancier ways to make columns of text line up, and you learn all about them in Hour 15, 
"Advanced Layout with Tables." The <pre> tag gives you a quick and easy way to preserve the 
alignment of any monospaced text files you might want to transfer to a Web page with a minimum of 
effort. 

You can use the <pre> tag as a quick way to insert extra vertical space between 
paragraphs. For example, to put several blank lines between the words up and 
down, you could type this: 

up<pre> 



</pre>down 



Font Size and Color 

The <big>, <small>, and <tt> tags give you some rudimentary control over the size and 
appearance of the text on your pages. Generally, you should try sticking to those tags until you are 
ready for the advanced font formatting controls discussed in Hour 16. 

However, there may be times when you'd just like a bit more control over the size and appearance of 
your text while maintaining as much compatibility with older Web browsers as possible. For those 
- ■ - times, you can use the officially discouraged but" widely used < f ont > tag. 

For example, the following HTML will change the size and color of some text on a page: 

<font size=5 color="purple">this text will be big and purple . </font> 
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The size attribute can take any value from 1 (tiny) to 7 (fairly big), with 3 being the default size. (If 
you need VERY big fonts, you'll need to use style sheets as explained in Hour 16.) 

The color attribute can take any of the following standard color names: black, white, red, 
green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, 
silver, or teal. 

The actual size and exact color of the font depend on each reader's screen resolution and preference 
settings, but you can be assured that size=6 is a lot bigger than size=2 and that color="red" 
certainly shows its fire. 

You learn more about controlling the color of the text on your pages in Hour 11, "Custom Backgrounds 
and Colors." That hour also shows you how to create your own custom colors and control the color of 
text links. 

Choosing a Typeface 

With the 3 and 4 versions of both Navigator and Internet Explorer, Netscape and Microsoft have added 
another extremely powerful form of font control: the <f ont f ace> attribute. This allows you to 
specify the actual typeface that should be used to display text — and has been the source of much 
rejoicing among Webmasters who are awfully sick of Times and Courier! 

The page in Figures 6.3 and 6.4 uses these font controls to present a quick but colorful history lesson. 
Notice how <f ont> tags can be nested inside one another, changing some aspects of the font's 
appearance while leaving others the same; for example, even when <f ont> tags change the size and 
color of the letters in A HISTORY OF EVERYTHING, the typeface specified in the first < font > tag 
still applies. Likewise, the <f ont> tags that make small capital letters do not change the color, so the 
entire line ends up maroon. 

The following is the code to set the typeface used for most of the text in Figure 6.3 : 

<font f ace="lucida sans Unicode, arial, helvetica"> 

If Netscape Navigator or Microsoft Internet Explorer can find a font named Lucida Sans Unicode on a 
user's system, that font is used. Otherwise, the browser will look for Arial or Helvetica. Figure 6.5 
shows how the page would look on a computer that didn't have Lucida Sans Unicode or Lucida Sans 
installed, but did have the Arial font. 
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